<template>
	<div class="text-question">
		<div
			class="item"
			:class="{
				active: value.includes(number[index]),
			}"
			v-for="(item, index) in answerList"
			:key="index"
			@click="onClick(item, index)"
		>
			<div class="number">{{ number[index] }}</div>
			{{ item }}
		</div>
	</div>
</template>

<script>
import mixins from "@/mixins"
export default {
	name: "text-question",
	mixins: [mixins],
	model: {
		prop: "value",
		event: "update:value",
	},
	props: {
		value: {
			type: Array,
			default: () => [],
		},
		readonly: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			number: ["A", "B", "C", "D", "E", "F"],
		}
	},
	computed: {
		nowQuestion() {
			return this.$store.getters["exam/nowQuestion"]
		},
		answerList() {
			return this.number.map(item => this.nowQuestion["answer" + item]).filter(item => item)
		},
		type() {
			if (this.nowQuestion.questionType === "单选题") {
				return "single"
			} else if (this.nowQuestion.questionType === "多选题") {
				return "multiple"
			}
		},
	},
	methods: {
		isActive(index) {
			return {
				active: this.value.includes(this.number[index]),
			}
		},
		onClick(item, index) {
			if (this.readonly) {
				return
			}
			const data = this.number[index]

			if (this.type === "single") {
				this.$emit("update:value", [data])
				this.$emit("on-change", [data])
			} else {
				let value = this.value
				if (value.includes(data)) {
					value = value.filter(i => i !== data)
				} else {
					value.push(data)
				}
				this.$emit("update:value", value.sort())
				this.$emit("on-change", value.sort())
			}
		},
	},
}
</script>

<style lang="scss" scoped>
.item {
	font-size: 30rpx;
	padding: 30rpx 0;
	transition: all 0.2s;
	.number {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		margin-right: 20rpx;
		border-radius: 50%;
		border: 1px solid #d5d7d6;
		width: 48rpx;
		height: 48rpx;
		transition: all 0.1s;
	}

	&.active {
		color: $color;
		.number {
			color: #fff;
			border: 1px solid $color;
			background: $color;
		}
	}
}
</style>
